<template>
	<view class="fans-list-page">
		<!--标题栏-->
		<bar-title  bgColor='bg-white'>
			<block slot="content">
				{{gameid== ''?"我的粉丝":"已报名"}}
			</block>
		</bar-title>

		<view class="container">
			<view class="fans-list cu-list menu-avatar">
				<block v-for="(fans, index) in fansList" :key="index">
					<view class="cu-item">
						<image class="cu-avatar round lg" :src="fans.headurl"></image>
						<view class="content">
							<view class="text-black">
								<view class="text-cut">{{ fans.nickname }}</view>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{ fans.autograph }}</view>
							</view>
						</view>
						<view class=" fans-btn">
							
							<button class="cu-btn block round line-cyan "
								v-if="fans.attenttype == 'W'"
								@click.stop="addFans(fans)"
							>
								<text>+ 关注</text>				
							</button>
							<button class="cu-btn block round line-grey"
								v-else
								@click.stop="delFans(fans)"
							>
								<text>相互关注</text>				
							</button>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		
	</view>
</template>

<script>
import viewMessage from '@/components/box/ViewMessage.vue';
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
export default {
	name: 'fans',
	components: {
		viewMessage,
		uniLoadMore
	},
	data() {
		return {
			gameid: '',
			pagenum: 1,
			loadingType: 'more',
			clickFans: true,
			fansList:[]
		}
	},
	
	onLoad(option) {
		if(option && option.gameid) {
			this.gameid = option.gameid
			this.getSignGameList(this.pagenum)
		}else{
			this.getAllFans(this.pagenum)
		}
		
	},
	methods: {
		async getAllFans(pagenum) {
			this.loadingType = 'loading'
			let fansList =  await this.$apis.myAllFans({pagenum})
			console.log(fansList);
			this.fansList = this.fansList.concat(fansList)
			if (!fansList.length<20) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		},
		async getSignGameList(pagenum) {
			this.loadingType = 'loading'
			let fansList =  await this.$apis.getSignGameList({
				pagenum,
				gameid: this.gameid
			})
			console.log(fansList);
			this.fansList = this.fansList.concat(fansList)
			if (!fansList.length<20) {
				this.loadingType = 'noMore'
				return
			}
			this.loadingType = 'more'
		},
		async addFans(fans) {
			this.clickFans = false
			this.$apis.addFans({othername: fans.username}).then(res => {
				fans.attenttype = 'M'
				this.$mTool.showToast({
					title: '关注成功',
					icon: 'none'
				})
				this.clickFans = true
			}).catch(err => {
				this.clickFans = true
			})
		},
		async delFans(fans) {
			this.clickFans = false
			this.$apis.delFans({othername: fans.username}).then(res => {
				console.log(res);
				fans.attenttype = 'W'
				this.$mTool.showToast({
					title: '取关成功',
					icon: 'none'
				})
				this.clickFans = true
			}).catch(err => {
				this.clickFans = true
			})
		},
		
	},
	onReachBottom(e) {
		if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
		    return
		}
		this.pagenum = this.pagenum + 1
		this.getAllFans(this.pagenum)
	},
}
</script>
<style lang="scss" scoped>
	page, .fans-list-page{
		background: #FFFFFF;
		min-height: 100%;
		.fans-btn{
			width: 130rpx;
			.cu-btn{
				font-size: 20rpx;
				padding: 0;
				height: 50rpx;
			}
		}
	}
	
</style>

